<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/vue.js"></script>
		<title>04天气案例_深度监视_简写</title>
	</head>
	<body>
		<div id="root">
			<h3>今天天气很{{info}}</h3>
			<button @click="changeWeather">切换天气</button>
			<hr>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						isHot: true,
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot;
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽';
					}
				},
				/* watch: {
					//监视计算属性
					isHot: {
						// immediate: false,
						// deep: true,
						handler(newValue, oldValue) {
							console.log('oldValue', oldValue);
							console.log('newValue', newValue);
							console.log('isHot改变了');
						}
					}
				}, */

				//简写的前提 不需要额外的配置 只有handler
				/* watch: {
					isHot(newValue, oldValue) {
						console.log('oldValue', oldValue);
						console.log('newValue', newValue);
						console.log('isHot改变了');
					}
				} */
			});

			//完整的写法
			/* vm.$watch('isHot', {
				// immediate: false,
				// deep: true,
				handler(newValue, oldValue) {
					console.log('oldValue', oldValue);
					console.log('newValue', newValue);
					console.log('isHot改变了');
				}
			}); */

			//简写的形式  所有vue管理的函数，我们写成完整的函数，不要写成箭头函数 this指向问题
			vm.$watch('isHot', function(newValue, oldValue) {
				console.log('oldValue', oldValue);
				console.log('newValue', newValue);
				console.log('isHot改变了');
			});
		</script>
	</body>
</html>